<template>
<div class="personal-card">
    <img src="../assets/img/logo.png" class="head-icon" />
    <span>盐巴鱼</span>
    <span>“欢迎大家来和我技术交流”</span>
    <span>“有外包单子也可以找我”</span>
    <a target="_blank" href='http://haosilu.cn'>外包作品</a>
    <div class="row">
        <svg t="1622251670761" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3180" width="32" height="32">
            <path d="M337.387 341.827c-17.757 0-35.514 11.838-35.514 29.595s17.757 29.595 35.514 29.595 29.596-11.838 29.596-29.595c0-18.497-11.838-29.595-29.596-29.595zM577.85 513.48c-11.838 0-22.937 12.578-22.937 23.676 0 12.578 11.838 23.676 22.937 23.676 17.757 0 29.595-11.838 29.595-23.676s-11.838-23.676-29.595-23.676z m-76.208-112.463c17.757 0 29.595-12.578 29.595-29.595 0-17.757-11.838-29.595-29.595-29.595s-35.515 11.838-35.515 29.595 17.757 29.595 35.515 29.595zM706.59 513.48c-11.839 0-22.937 12.578-22.937 23.676 0 12.578 11.838 23.676 22.937 23.676 17.757 0 29.595-11.838 29.595-23.676s-11.838-23.676-29.595-23.676z" fill="#28C445" p-id="3181"></path>
            <path d="M510.52 2.96C228.624 2.96 0 231.584 0 513.48S228.624 1024 510.52 1024s510.52-228.624 510.52-510.52S792.416 2.96 510.52 2.96z m-96.925 641.48c-29.595 0-53.271-5.92-81.387-12.579l-81.387 41.434 22.936-71.769c-58.45-41.434-93.965-95.445-93.965-159.815 0-113.202 105.803-201.988 233.803-201.988 114.682 0 216.047 71.028 236.023 166.474-7.398-0.74-14.797-1.48-22.196-1.48-110.983 1.48-198.29 85.086-198.29 188.67 0 17.018 2.96 33.295 7.4 49.573-7.4 0.74-15.538 1.48-22.937 1.48z m346.266 82.866l17.757 59.191-63.63-35.514c-22.936 5.919-46.612 11.838-70.289 11.838-111.722 0-199.768-76.948-199.768-172.393-0.74-94.705 87.306-171.653 198.289-171.653 105.803 0 199.029 77.687 199.029 172.393 0 53.271-34.775 100.624-81.388 136.138z" fill="#28C445" p-id="3182"></path>
        </svg>
        <span style="line-height:32px">x983970814</span>
    </div>
    <div class="row">
        <svg t="1622252014054" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4160" width="32" height="32">
            <path d="M511.879528 1023.744068a511.864612 511.864612 0 1 1 511.864611-511.60868 511.60868 511.60868 0 0 1-511.864611 511.60868z m275.383161-418.705253a222.661106 222.661106 0 0 0-64.239009-116.449199c7.422037-63.983076-19.706788-75.244098-19.706788-75.244098-5.630511-197.835672-179.152614-194.25262-182.735666-194.25262s-176.849223-3.583052-182.735667 194.25262c0 0-27.128824 11.261021-19.706787 75.244098a224.606192 224.606192 0 0 0-64.239009 116.449199s-6.398308 119.008522 59.376295 14.588142a332.711998 332.711998 0 0 0 41.972898 75.244098s-48.627138 16.123735-44.532221 58.352565c0 0-1.535594 46.835612 103.908516 43.508492 0 0 73.964436-5.630511 96.230547-36.342387h19.706788c22.010178 30.711877 96.230547 36.342387 96.230547 36.342387 105.44411 3.32712 103.652584-43.508492 103.652584-43.508492 4.094917-42.22883-44.532221-58.352566-44.532221-58.352565a328.002843 328.002843 0 0 0 42.22883-75.244098c65.774603 104.420381 59.120363-14.588141 59.120363-14.588142z" fill="#32A6D4" p-id="4161"></path>
        </svg>
        <span style="line-height:32px">983970814</span>
    </div>
    <div class="icon-contanier">
        <a class="column" style="margin-right:10px;" href='https://github.com/1xu1' target="_blank">
            <svg t="1622195461481" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2347" width="32" height="32">
                <path d="M1021.72444445 512a495.16088889 495.16088889 0 0 1-97.57582223 299.64515555 500.62222222 500.62222222 0 0 1-250.85724444 184.22897778 30.58346667 30.58346667 0 0 1-26.2144-4.73315555 25.85031111 25.85031111 0 0 1-8.00995556-20.02488889v-139.81013334a119.05706667 119.05706667 0 0 0-34.58844444-94.29902222 473.31555555 473.31555555 0 0 0 67.72053333-11.65084444 248.30862222 248.30862222 0 0 0 62.2592-26.2144 187.50577778 187.50577778 0 0 0 53.52106667-43.69066667 209.35111111 209.35111111 0 0 0 36.40888889-69.90506667 334.2336 334.2336 0 0 0 13.83537778-100.12444444 191.87484445 191.87484445 0 0 0-52.7928889-136.53333333 176.21902222 176.21902222 0 0 0-5.09724444-135.44106667 87.01724445 87.01724445 0 0 0-53.52106666 7.28177778 341.87946667 341.87946667 0 0 0-61.16693334 29.12711111l-25.12213333 15.65582222a473.31555555 473.31555555 0 0 0-254.86222223 0c-7.28177778-5.09724445-16.384-10.55857778-28.03484444-17.84035555A371.00657778 371.00657778 0 0 0 300.82844445 220.72888889a94.29902222 94.29902222 0 0 0-57.16195556-9.10222222 178.40355555 178.40355555 0 0 0-4.73315556 136.53333333 197.70026667 197.70026667 0 0 0-52.4288 137.26151111A327.68 327.68 0 0 0 200.33991111 584.81777778a223.55057778 223.55057778 0 0 0 36.40888889 69.90506667 172.94222222 172.94222222 0 0 0 53.52106667 44.41884444 304.7424 304.7424 0 0 0 62.2592 26.2144 471.13102222 471.13102222 0 0 0 68.08462222 11.65084444 105.22168889 105.22168889 0 0 0-32.768 68.44871112 112.86755555 112.86755555 0 0 1-30.21937778 9.4663111 190.41848889 190.41848889 0 0 1-36.40888889 3.2768A78.6432 78.6432 0 0 1 274.61404445 803.27111111a124.5184 124.5184 0 0 1-36.4088889-41.50613333 109.22666667 109.22666667 0 0 0-32.03982222-34.58844445 91.7504 91.7504 0 0 0-32.768-16.01991111h-13.1072a47.33155555 47.33155555 0 0 0-19.29671111 2.91271111q-5.46133333 3.2768-3.2768 7.64586667a50.24426667 50.24426667 0 0 0 6.18951111 9.10222222 62.98737778 62.98737778 0 0 0 8.73813334 8.37404445l4.73315555 2.91271111a88.83768889 88.83768889 0 0 1 29.12711111 25.12213333 179.49582222 179.49582222 0 0 1 20.75306667 33.49617778l6.5536 15.29173333a82.28408889 82.28408889 0 0 0 29.12711111 41.14204445 109.22666667 109.22666667 0 0 0 44.05475556 18.93262222 223.18648889 223.18648889 0 0 0 45.8752 4.73315556 207.16657778 207.16657778 0 0 0 36.40888888-2.54862223l15.29173334-2.54862222v95.39128889a26.2144 26.2144 0 0 1-8.73813334 20.02488889 31.67573333 31.67573333 0 0 1-26.57848888 4.73315555 498.43768889 498.43768889 0 0 1-249.40088889-185.32124444A486.78684445 486.78684445 0 0 1 2.27555555 512a497.70951111 497.70951111 0 0 1 68.44871112-254.86222222A504.6272 504.6272 0 0 1 257.13777778 70.72426667 497.70951111 497.70951111 0 0 1 512 2.27555555a497.70951111 497.70951111 0 0 1 254.86222222 68.44871112A504.6272 504.6272 0 0 1 953.27573333 257.13777778 496.98133333 496.98133333 0 0 1 1021.72444445 512z" p-id="2348"></path>
            </svg>
            <span class="icon-words">github</span>
        </a>
        <a class="column" href='https://space.bilibili.com/11725175' target="_blank">
            <svg t="1622179550046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14044" width="32" height="32">
                <path d="M256 0h512c141.38368 0 256 114.61632 256 256v512c0 141.38368-114.61632 256-256 256H256C114.61632 1024 0 909.38368 0 768V256C0 114.61632 114.61632 0 256 0z m53.27872 595.2c-13.11744-9.9328-27.92448-16.896-43.1616-23.01952-31.09888-12.24704-63.67232-16.68096-96.88064-15.83104-7.8336 0-15.65696 0.63488-23.69536 1.05472 0-0.63488-0.63488-1.47456-0.63488-2.52928-2.11968-23.6544-4.6592-47.29856-6.3488-70.52288-1.47456-19.42528-2.10944-38.85056-2.53952-58.2656-0.63488-37.376-0.63488-74.53696-0.63488-111.90272 0-8.86784-0.63488-7.81312-7.40352-4.864-20.9408 8.448-41.6768 16.6912-62.6176 24.70912-0.63488 0.63488-1.6896 2.74432-1.26976 3.7888 6.3488 23.6544 11.008 47.93344 14.1824 72.00768 3.1744 20.89984 5.91872 41.1648 8.87808 61.6448 2.53952 17.95072 4.22912 35.8912 6.3488 54.05696 2.11968 18.36032 4.6592 36.73088 6.76864 55.31648 2.11968 17.73568 4.22912 34.83648 6.3488 52.57216 1.47456 12.66688 2.74432 25.11872 3.80928 37.7856 0.63488 9.9328 1.47456 19.84512 1.6896 29.34784 0 2.10944 0.63488 3.1744 2.75456 3.1744 4.64896 0 8.87808 0.62464 13.32224 0 21.57568-2.11968 43.15136-3.59424 64.3072-6.7584 16.2816-2.53952 32.1536-6.33856 47.81056-11.61216 22.2208-7.39328 41.24672-20.06016 59.65824-34.63168 7.82336-5.90848 14.17216-13.08672 16.91648-22.1696 5.92896-14.99136 3.3792-25.11872-7.60832-33.35168z m133.66272 16.0768c-1.10592-12.1856-2.2016-24.9856-3.74784-37.1712-1.536-16.7936-3.29728-33.5872-4.83328-50.59584-1.536-15.53408-2.2016-30.86336-3.30752-46.40768-1.536-21.41184-3.29728-42.83392-4.84352-64.256l-3.29728-47.45216c-0.44032-5.87776-2.8672-7.34208-9.23648-6.92224a834.6624 834.6624 0 0 1-22.8864 1.46432c-6.6048 0.63488-13.2096 1.47456-19.58912 2.0992 19.80416 100.37248 28.61056 200.94976 38.95296 300.68736 12.10368 1.05472 23.10144 1.67936 34.54976 2.73408 2.2016 0.4096 3.29728 0 3.29728-2.0992l-1.09568-11.55072c-0.88064-13.86496-2.42688-27.29984-3.96288-40.52992z m-64.8192 10.2912c-1.36192-12.4928-2.53952-24.7808-3.91168-37.26336-1.36192-14.15168-2.53952-28.5184-4.3008-42.67008-0.98304-8.74496-2.3552-17.07008-3.52256-25.3952-0.38912-3.13344-2.3552-4.58752-5.4784-4.16768-5.48864 0.6144-11.35616 0.6144-17.02912 1.45408-7.8336 1.04448-15.6672 2.49856-23.87968 3.54304 9.68704 53.82144 19.6096 107.60192 29.7472 161.3312 11.74528-1.66912 22.89664-3.1232 34.2528-4.57728-0.38912-4.16768-0.98304-8.32512-1.37216-12.0832-1.56672-13.73184-3.13344-27.05408-4.5056-40.17152zM498.7904 673.3824c-0.4096-20.85888-1.024-41.08288-1.44384-61.94176-0.4096-25.7024 0-51.8144 0-77.5168 0-5.69344-0.4096-10.9568-0.6144-16.65024 0-2.52928-1.46432-4.62848-4.15744-4.62848A838.16448 838.16448 0 0 0 460.02176 512c-4.1472 0-7.8848 0.63488-12.02176 1.47456 0.4096 1.47456 0.4096 2.52928 0.4096 3.584 1.45408 17.69472 3.11296 35.1744 4.56704 52.44928 1.45408 16.85504 3.10272 34.12992 4.5568 50.98496 1.65888 18.3296 3.11296 36.6592 4.77184 54.9888 0 1.04448 1.65888 2.73408 2.69312 2.73408 10.98752 0.4096 22.58944 0 34.2016 0-0.4096-2.32448-0.4096-3.7888-0.4096-4.84352zM358.4 484.7104c-1.792-20.0704-3.2256-39.07584-4.83328-58.51136-0.3584-2.52928-1.24928-3.79904-3.04128-3.79904-5.7344 0-11.64288 0-17.72544 0.41984 2.32448 21.54496 4.47488 42.25024 6.79936 63.58016 6.62528-0.63488 12.53376-0.84992 18.80064-1.6896z m153.6 10.17856v-54.7328c0-3.88096-1.6384-4.95616-5.1712-4.95616H486.4v62.9248c8.92928 0.43008 17.37728 0.64512 25.6 1.0752v-4.3008z m-179.2 1.37216v-4.1984c-0.95232-10.89536-2.29376-21.38112-3.24608-32.28672-0.57344-6.912-1.3312-13.6192-1.91488-20.75648-0.37888-1.67936 0.38912-4.1984-2.29376-3.76832-6.11328 0.62464-12.032 2.08896-18.14528 2.72384 3.44064 20.75648 6.68672 40.88832 10.12736 61.22496l15.47264-2.93888z m140.8 1.4336v-32.53248c0-8.56064-0.48128-17.55136 0-26.112 0-3.20512-1.19808-3.85024-4.3008-3.85024h-21.2992c1.91488 22.26176 3.584 43.23328 5.49888 64 6.46144-0.43008 12.92288-0.86016 20.10112-1.49504z m283.74016 97.65888c-13.1072-9.9328-27.91424-16.896-43.14112-23.02976-31.08864-12.24704-63.66208-16.6912-96.86016-15.84128-7.82336 0-15.64672 0.63488-23.68512 1.05472 0-0.63488-0.63488-1.47456-0.63488-2.53952-2.10944-23.6544-4.64896-47.3088-6.3488-70.5536-1.47456-19.43552-2.10944-38.87104-2.52928-58.29632-0.63488-37.39648-0.63488-74.57792-0.63488-111.96416 0-8.86784-0.63488-7.81312-7.40352-4.85376-20.93056 8.448-41.65632 16.6912-62.59712 24.70912-0.63488 0.41984-1.6896 2.53952-1.47456 3.584a563.07712 563.07712 0 0 1 14.16192 72.0384c3.1744 20.92032 5.92896 41.19552 8.88832 61.68576 2.53952 17.96096 4.22912 35.91168 6.3488 54.07744 2.10944 18.3808 4.64896 36.7616 6.7584 55.3472 2.11968 17.74592 4.22912 34.85696 6.3488 52.60288 1.47456 12.67712 2.74432 25.1392 3.79904 37.81632 0.63488 9.9328 1.4848 19.85536 1.69984 29.35808 0 2.10944 0.63488 3.1744 2.74432 3.1744 4.64896 0 8.87808 0.62464 13.32224 0 21.57568-2.11968 43.14112-3.59424 64.28672-6.7584a286.6176 286.6176 0 0 0 47.79008-11.6224c22.21056-7.39328 41.24672-20.0704 59.63776-34.64192 7.82336-5.91872 14.17216-13.1072 16.91648-22.19008 6.144-14.78656 3.59424-24.92416-7.39328-33.15712z m133.60128 15.9232c-1.10592-12.1856-2.2016-24.9856-3.74784-37.1712-1.536-16.7936-3.29728-33.5872-4.83328-50.59584-1.536-15.53408-2.2016-30.86336-3.30752-46.40768-1.536-21.41184-3.29728-42.83392-4.84352-64.256l-3.29728-47.45216c-0.44032-5.87776-2.8672-7.34208-9.23648-6.92224-7.71072 0.62464-15.18592 1.04448-22.8864 1.46432-6.6048 0.63488-13.2096 1.47456-19.58912 2.0992 19.80416 100.37248 28.61056 200.94976 38.95296 300.68736 12.10368 1.05472 23.10144 1.67936 34.54976 2.73408 2.2016 0.4096 3.29728 0 3.29728-2.0992l-1.09568-11.55072c-0.88064-13.86496-2.42688-27.29984-3.96288-40.52992z m-64.8192 10.2912c-1.36192-12.4928-2.53952-24.7808-3.91168-37.26336-1.36192-14.15168-2.53952-28.5184-4.3008-42.67008-0.98304-8.74496-2.3552-17.07008-3.52256-25.3952-0.38912-3.13344-2.3552-4.58752-5.4784-4.16768-5.48864 0.6144-11.35616 0.6144-17.02912 1.45408-7.8336 1.04448-15.6672 2.49856-23.87968 3.54304 9.68704 53.82144 19.6096 107.60192 29.7472 161.3312a2574.848 2574.848 0 0 1 34.2528-4.57728c-0.38912-4.16768-0.98304-8.32512-1.37216-12.0832-1.56672-13.73184-3.13344-27.05408-4.5056-40.17152zM959.5904 673.3824c-0.4096-20.85888-1.024-41.08288-1.44384-61.94176-0.4096-25.7024 0-51.8144 0-77.5168 0-5.69344-0.4096-10.9568-0.6144-16.65024 0-2.52928-1.46432-4.62848-4.15744-4.62848A838.18496 838.18496 0 0 0 920.82176 512c-4.1472 0-7.8848 0.63488-12.02176 1.47456 0.4096 1.47456 0.4096 2.52928 0.4096 3.584 1.45408 17.69472 3.11296 35.1744 4.56704 52.44928 1.45408 16.85504 3.10272 34.12992 4.5568 50.98496 1.65888 18.3296 3.11296 36.6592 4.77184 54.9888 0 1.04448 1.65888 2.73408 2.69312 2.73408 10.98752 0.4096 22.58944 0 34.2016 0-0.4096-2.32448-0.4096-3.7888-0.4096-4.84352zM806.4 484.7104c-1.792-20.0704-3.2256-39.07584-4.83328-58.51136-0.3584-2.52928-1.24928-3.79904-3.04128-3.79904-5.7344 0-11.64288 0-17.72544 0.41984 2.32448 21.54496 4.47488 42.25024 6.79936 63.58016 6.62528-0.63488 12.53376-0.84992 18.80064-1.6896z m153.6 10.17856v-54.7328c0-3.88096-1.6384-4.95616-5.1712-4.95616H934.4v62.9248c8.92928 0.43008 17.37728 0.64512 25.6 1.0752v-4.3008z m-179.2 1.37216v-4.1984c-0.95232-10.89536-2.29376-21.38112-3.24608-32.28672-0.57344-6.912-1.3312-13.6192-1.91488-20.75648-0.37888-1.67936 0.38912-4.1984-2.29376-3.76832-6.11328 0.62464-12.032 2.08896-18.14528 2.72384 3.44064 20.75648 6.68672 40.88832 10.12736 61.22496l15.47264-2.93888z m153.6 1.4336v-32.53248c0-8.56064-0.48128-17.55136 0-26.112 0-3.20512-1.19808-3.85024-4.3008-3.85024h-21.2992c1.91488 22.26176 3.584 43.23328 5.49888 64 6.46144-0.43008 12.92288-0.86016 20.10112-1.49504z" fill="#F08198" p-id="14045"></path>
                <path d="M193.49504 668.16c-3.06176-21.79072-6.11328-42.98752-9.17504-64 11.81696 2.52928 61.55264 21.4016 64 24.32-18.13504 13.02528-36.07552 26.25536-54.82496 39.68zM633.81504 668.16A12622.848 12622.848 0 0 0 624.64 604.16c11.81696 2.52928 61.55264 21.4016 64 24.32-18.14528 13.02528-36.07552 26.25536-54.82496 39.68z" fill="#F08198" p-id="14046"></path>
            </svg>
            <span class="icon-words">Bilibili</span>
        </a>
    </div>
    <BuyMeCofee></BuyMeCofee>
</div>
</template>

<script>
//引入组件
import BuyMeCofee from "../components/BuyMeCofee"
export default {
    name: "PersonalCard",
    components: {
        BuyMeCofee
    }
}
</script>

<style scoped>
@import url(../assets/css/utils.css);

a {
    cursor: pointer;
    color: #007bff;
    text-decoration: none;
    background-color: transparent;

}

.personal-card {
    margin-top: 20px;
    margin-left: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 10px 10px 10px 10px;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.personal-card>.head-icon {
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

.personal-card>.p-icon {
    width: 32px;
    height: 32px;
    font-size: 32px;
    display: flex;
    align-items: center;
}

.icon-contanier {
    height: 100%;
    display: flex;
    align-items: center;
}

.icon-words {
    height: 32px;
    text-align: center;
    line-height: 32px;
    font: 16px "Fira Sans";
}
</style>
